<template>
  <div class="edit_box">
    <el-scrollbar>
      <el-form
        ref="csForm"
        class="csForm"
        :model="pageData.formData"
        :rules="pageData.formRules"
        status-icon
        label-width="120px"
      >
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="编号：">
              <el-input
                v-model="pageData.formData.fFullName"
                autocomplete="off"
                :disabled="!pageData.isAdd || pageData.isAdd"
                placeholder="自动填充"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="主题：" prop="fProductName">
              <el-input
                v-model="pageData.formData.fProductName"
                placeholder="请输入主题"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="所属单位：" prop="fProductAffiliation">
              <el-input
                v-model="pageData.formData.fProductAffiliation"
                placeholder="请输入所属单位名称"
                disabled
              />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="发布人员：" prop="fProductUnit">
              <el-select
                v-model="pageData.formData.fProductUnit"
                placeholder="请选择发布人员"
                style="width: 100%"
              >
                <el-option
                  v-for="item in pageData.unit"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发布日期：" prop="fProductionTime">
              <el-date-picker
                v-model="pageData.formData.fProductionTime"
                type="date"
                placeholder="请选择发布日期"
                :size="size"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发布单位：" prop="fProductUnit">
              <el-select
                v-model="pageData.formData.fProductUnit"
                placeholder="请选择发布单位"
                style="width: 100%"
              >
                <el-option
                  v-for="item in pageData.unit"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类型：" prop="fProductModel">
              <el-select
                v-model="pageData.formData.fProductModel"
                placeholder="请选择类型"
                style="width: 100%"
                @visible-change="selectzbModel"
              >
                <el-option
                  v-for="item in pageData.zbModel"
                  :key="item.fDdcCode"
                  :label="item.label"
                  :value="item.fDdcName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="关键词组：">
              <el-input
                v-model="pageData.formData.fRemark"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
		  <el-col :span="2">
			  <el-button type="primary" @click="onHandleEquipAdd">
				...
			  </el-button>
		  </el-col>
          <el-col :span="12">
            <el-form-item label="录入人员：">
              <el-input
                v-model="pageData.formData.fFullName"
                autocomplete="off"
                :disabled="!pageData.isAdd || pageData.isAdd"
                placeholder="自动填充"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录入时间：">
              <el-input
                v-model="pageData.formData.fFullName"
                autocomplete="off"
                :disabled="!pageData.isAdd || pageData.isAdd"
                placeholder="自动填充"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input
                v-model="pageData.formData.fRemark"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>

        </el-row>

        <!-- 子表 -->
        <el-row>
		<div class="table-head">
			<div class="fj">
				附件
			</div>
			<div>
				<el-button type="primary">
					上传附件
				</el-button>
				<el-button type="primary">
					下载附件
				</el-button>
			</div>
		</div>
          <el-table
            height="250"
            border
            style="width: 100%; margin: 10px 0"
            :data="pageData.formData.productParams"
          >
		  <el-table-column
		    prop="fParamName"
		    label="序号"
		  ></el-table-column>
            <el-table-column
              prop="fParamName"
              label="类别"
            ></el-table-column>
            <el-table-column
              prop="fParamName"
              label="文件名称"
            ></el-table-column>
            <el-table-column prop="fParamValueID" label="文件地址">
            </el-table-column>
            <el-table-column prop="fParamValue" label="备注">
            </el-table-column>
          </el-table>
        </el-row>
      </el-form>
    </el-scrollbar>
    <el-row>
      <el-col :span="24" style="text-align: right">
        <el-button @click="onHandleCancel">取消</el-button>
        <el-button type="primary" @click="onHandleCancel"> 提交 </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted, reactive, ref, watch } from "vue";
import { ElLoading, ElMessage } from "element-plus";
import { Plus, Delete, ArrowDown } from "@element-plus/icons-vue";
import selectmtrparam from "@/components/select/selectmtrparam.vue";
import on_setEnable from "@/api/basic/equipinfo";

import {
  add_equip,
  select_equip,
  select_equipModel,
  select_equipDetails,
  update_equip,
  query_cstable,
} from "@/api/basic/equipinfo";

export default {
  components: { Plus, Delete, ArrowDown, selectmtrparam },

  props: {
    modifyObj: { type: Object, required: true },
    isAdd: { type: Boolean, required: true, default: false },
  },
  setup(props, context) {
    onMounted(() => {

    });


    // 表单绑定返回的数据
    const csForm = ref();

    let pageData = reactive({
      // 装备类型
      zbType: [],
      // 装备型号
      zbModel: [],
      // 计量单位
      unit: [
        {
          value: "箱",
          label: "箱",
        },
        {
          value: "个",
          label: "个",
        },
        {
          value: "包",
          label: "包",
        },
      ],
      formData: {
        productParams: [],
        fPIsSerial: "1", //序列号管理
      },
      formRules: {
        fProductCode: [
          { required: true, message: "请输入装备编号", trigger: "blur" },
        ],
        fProductName: [
          { required: true, message: "请输入装备名称", trigger: "blur" },
        ],
        fProductAffiliation: [
          { required: true, message: "请输入所属单位", trigger: "blur" },
        ],
        fProductSpec: [
          { required: true, message: "请输入规格", trigger: "blur" },
        ],
        fProductModel: [
          { required: true, message: "请选择型号", trigger: "blur" },
        ],
        fProductUnit: [
          { required: true, message: "请选择计量单位", trigger: "blur" },
        ],
        fEcName: [{ required: true, message: "请选择类别", trigger: "blur" }],
      },

      isAdd: props.isAdd,
      currentRow: {},
      selectParamVisible: false, //选择装备参数弹窗
    });

    // 选择时间开始
    const size = (ref < "default") | "large" | ("small" > "default");
    const shortcuts = [
      {
        text: "Today",
        value: new Date(),
      },
      {
        text: "Yesterday",
        value: () => {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24);
          return date;
        },
      },
      {
        text: "A week ago",
        value: () => {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
          return date;
        },
      },
    ];



    /* 增加子表中参数信息 */
    const onHandleEquipAdd = () => {
      const dtl = {
        fAuditUserId: "",
        fAuditorTime: "",
        fBookCode: "",
        fCreateUserId: "",
        fCreatorTime: "",
        fDtlId: "",
        fId: "",
        fLastModifyTime: "",
        fLastModifyUserId: "",
        fParamCode: "",
        fParamName: "",
        fParamSort: 0,
        fParamValue: "",
        fParamValueID: "",
        fRemark: "",
        // fState: 0,
      };
      // console.log(pageData, dtl);
      pageData.formData.productParams.push(dtl);
    };







    const onHandleCancel = () => {
      context.emit("cancel");
    };


    return {
      csForm,
      pageData,
      size,
      shortcuts,
      onHandleEquipAdd,
      onHandleCancel,
    };
  },
};
</script>

<style lang="scss">
.edit_box {
  height: 100%;
  background-color: white;
  .csForm {
    width: calc(100% - 6px);
  }
}
</style>
<style lang="less" scoped="scoped">
	.table-head{
		width: 350px;
		display: flex;
		justify-content: space-between;
		padding: 0;
		margin-bottom: -10px;
		.fj{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 16px;
			font-weight: 800;
			color: rgb(64,158,255);
			width: 120px;
			height: 40px;
			border-top: 1px solid rgb(64,158,255);
			border-left: 1px solid rgb(64,158,255);
			border-right: 1px solid rgb(64,158,255);
			border-radius: 0 90px 0px 0px;
		}
	}
</style>
